﻿@using BookShop.DTO
@using BookShop.Library.Constant
@model BookShop.Site.Models.OrderCartItemListModel
@{
    ViewBag.Title = "Thanh toán | Book Shop Ngân Hà";
    var customer = (Customer)Session[SessionKey.Customer];
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li><a href="@Url.Action("ProductPage", "Home")">Sản phẩm</a></li>
    <li class="active">Thanh toán</li>
</ul>

<form action="@Url.Action("CheckOut")" id="checkout-form" method="POST">
    <div class="row margin-bottom-40">
        <div class="col-md-12 col-sm-12">
            <h1>Checkout</h1>
            <div class="panel-group checkout-page accordion scrollable" id="checkout-page">

                <!-- BEGIN CHECKOUT -->
                <div id="checkout" class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#checkout-page" href="#checkout-content" class="accordion-toggle">Bước 1: Bạn là </a>
                        </h2>
                    </div>
                    <div id="checkout-content" class="panel-collapse collapse in">
                        <div class="panel-body row">
                            @if (customer != null)
                            {
                                <div class="col-md-6 col-sm-6">
                                    <h4>Xin mời quý khách @customer.FullName thực hiện thanh toán</h4>
                                </div>
                            }
                            else
                            {
                                <div class="col-md-6 col-sm-6">
                                    <h3>Khách hàng mới</h3>
                                    <p>Lựa chọn</p>
                                    <div class="radio-list">
                                        <label>
                                            <input type="radio" id="registered-account" name="account" value="register">
                                            Đã đăng ký tài khoản
                                        </label>
                                        <label>
                                            <input type="radio" id="guest-account" name="account" value="guest">
                                            Chưa đăng ký tài khoản
                                        </label>
                                    </div>
                                    <p id="register-info"><a href="@Url.Action("SignUp", "Account")">Đăng ký tài khoản</a> để có thể mua hàng nhanh hơn, được cập nhật về trạng thái đơn hàng và theo dõi các đơn hàng của bạn.</p>
                                </div>
                                <div class="col-md-6 col-sm-6" id="login-panel">
                                    <h3>Khách trở lại</h3>
                                    <form role="form" action="#" method="POST">
                                        <div class="form-group">
                                            <label for="email-login">Tên đăng nhập</label>
                                            <input type="text" id="username" name="username" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label for="password-login">Mật khẩu</label>
                                            <input type="password" id="password" name="password" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label for="fail-login-reason" class=""></label>
                                            <div id="fail-login-reason">
                                                @Html.ValidationSummary(true, "Đăng nhập lỗi!")
                                            </div>
                                        </div>
                                        <div class="padding-top-20">
                                            <button class="btn btn-primary" id="login-button" type="button">Đăng nhập</button>
                                        </div>
                                    </form>
                                </div>
                            }
                            <div class="col-md-12">
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-parent="#checkout-page" data-target="#payment-address-content">Tiếp tục</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END CHECKOUT -->

                <!-- BEGIN PAYMENT ADDRESS -->
                <div id="payment-address" class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#checkout-page" href="#payment-address-content" class="accordion-toggle">Bước 2: Thông tin đơn hàng
                            </a>
                        </h2>
                    </div>
                    <div id="payment-address-content" class="panel-collapse collapse">
                        <div class="panel-body row">
                            <div class="alert alert-danger display-hide" style="display: none;">
                                <button class="close" data-close="alert"></button>
                                @AlertMessage.InvalidInput
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <h3>Thông tin cá nhân</h3>
                                <div class="form-group">
                                    <label for="firstname">Họ và tên <span class="require">*</span></label>
                                    <input type="text" id="fullName" name="fullName" class="form-control">
                                    <span class="help-block" for="fullName"></span>
                                </div>
                                <div class="form-group">
                                    <label for="email">E-Mail <span class="require">*</span></label>
                                    <input type="text" id="email" name="email" class="form-control">
                                    <span class="help-block" for="email"></span>
                                </div>
                                <div class="form-group">
                                    <label for="telephone">Số điện thoại <span class="require">*</span></label>
                                    <input type="text" id="phone" name="phone" class="form-control">
                                    <span class="help-block" for="phone"></span>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <h3>Địa chỉ giao hàng</h3>
                                <div class="form-group">
                                    <label for="address1">Địa chỉ giao hàng 1 (Chính) <span class="require">*</span></label>
                                    <input type="text" id="primaryAddress" name="primaryAddress" class="form-control">
                                    <span class="help-block" for="primaryAddress"></span>
                                </div>
                                <div class="form-group">
                                    <label for="address2">Địa chỉ giao hàng 2 (Phụ)</label>
                                    <input type="text" id="secondaryAddress" name="secondaryAddress" class="form-control">
                                </div>
                            </div>
                            <hr>
                            <div class="col-md-12">
                                <button class="btn btn-primary  pull-right" type="button" data-toggle="collapse" data-parent="#checkout-page" data-target="#payment-method-content" id="button-payment-address">Tiếp tục</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PAYMENT ADDRESS -->

                <!-- BEGIN PAYMENT METHOD -->
                <div id="payment-method" class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#checkout-page" href="#payment-method-content" class="accordion-toggle">Bước 3: Phương thức thanh toán
                    </a>
                        </h2>
                    </div>
                    <div id="payment-method-content" class="panel-collapse collapse">
                        <div class="panel-body row">
                            <div class="col-md-12">
                                <p>Hiện tại website chỉ cung cấp phương thức thanh toán là trả tiền khi nhận hàng. Chúng tôi sẽ cố gắng khắc phục nhược điểm này trong thời gian gần nhất.</p>
                                <button class="btn btn-primary  pull-right" type="button" id="button-payment-method" data-toggle="collapse" data-parent="#checkout-page" data-target="#confirm-content">Tiếp tục</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PAYMENT METHOD -->

                <!-- BEGIN CONFIRM -->
                <div id="confirm" class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#checkout-page" href="#confirm-content" class="accordion-toggle">Bước 4: Xác nhận đơn hàng
                    </a>
                        </h2>
                    </div>
                    <div id="confirm-content" class="panel-collapse collapse">
                        <div class="panel-body row">
                            <div class="col-md-12 clearfix">
                                @{
                                    Html.RenderPartial("_OrderCartItemList", Model);
                                }
                                <div class="clearfix"></div>
                                <button class="btn btn-primary pull-right" type="submit" id="button-confirm">Đặt hàng</button>
                                <a href="@Url.Action("Index", "Home")" class="btn btn-default pull-right margin-right-20">Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END CONFIRM -->
            </div>
            <!-- END CHECKOUT PAGE -->
        </div>
    </div>
</form>
@section Javascript{
    <script src="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src='~/Content/assets/global/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#login-panel').hide();
            $('#checkout').on('change', '#checkout-content input[name="account"]', function () {
                if ($(this).attr('value') == 'register') {
                    $('#login-panel').show();
                } else {
                    $('#login-panel').hide();
                }
            });
            $('#login-button').click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Account/Login',
                    data: {
                        username: $('#username').val(),
                        password: $('#password').val(),
                        previousUrl: $(location).attr('href')
                    },
                    success: function () {
                        location.reload(true);
                    },
                    error: function () {
                        alert('error');
                    }
                });
            });
        });
        function validateAdd() {
            var form1 = $('#checkout-form');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    email: {
                        required: true
                    },
                    phone: {
                        required: true,
                        digits: true
                    },
                    primaryAddress: {
                        required: true
                    },
                    fullName: {
                        required: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}

@section Css{
    <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <link href="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
}